<template>
  <div class="pixiv-container" ref="picContentRef" @scroll="handleScroll">
    <fs-water-fall :image-list="state.imageList" :column="2" :gap="10" :loading="state.loading" v-slot="{ adress }">
      <a class="image-container" :href="adress" target="_blank">
        <img :src="adress" />
      </a>
    </fs-water-fall>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import FsWaterFall from "@/components/FsWaterFall/FsWaterFall.vue";
import { getVilipixRankingList } from "@/service/api/vilipixRequest";
import type { IImageInfoData } from "@/components/FsWaterFall/types";
import { _debounce } from "@/utils/tools";

const picContentRef = ref<HTMLElement>();
const state = reactive({
  imageList: [] as IImageInfoData[],
  page: 1,
  pageSize: 30,
  finish: false,
  loading: false,
});
onMounted(() => {
  getPicList();
});

const handleScroll = _debounce((e: any) => {
  if (picContentRef.value) {
    const scrollHeight = picContentRef.value.scrollHeight;
    const scrollTop = e.target.scrollTop;
    const clientHeight = picContentRef.value.clientHeight;
    if (clientHeight + scrollTop >= scrollHeight - 100) {
      !state.finish && getPicList();
    }
  }
}, 500);

const getPicList = async () => {
  state.loading = true;
  const res = await getVilipixRankingList({ pageSize: state.pageSize, page: state.page });
  const imageList: IImageInfoData[] = [];
  state.loading = false;
  if (!res.data.rows.length) {
    state.finish = true;
  }
  res.data.rows.forEach((item) => {
    imageList.push({
      width: item.width,
      height: item.height,
      adress: item.regular_url,
    });
  });
  state.imageList = [...state.imageList, ...imageList];
  state.page++;
};
</script>

<style scoped lang="scss">
.pixiv-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #ddeeff;
  overflow-y: scroll;
  .image-container {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
